<template>
	<view class="musicCardList">
		<view class="cardListTitle">
			{{props.data.title}}
		</view>
		<scroll-view :scroll-x="true" :show-scrollbar="false" class="cards">
		<view class="card" v-for="(item,index) of props.data.data" :style="{backgroundImage:`url(${item.img})`}">
			<view class="title">
				私人漫游
			</view>
		
		</view>
		</scroll-view>
	</view>
	
</template>

<script setup>
	import {
		ref,
		defineProps
	} from "vue"
	
	const props=defineProps({
		data:Object
	})
	// let data=ref({
	// 	img:"http://p4.music.126.net/pcYHpMkdC69VVvWiynNklA==/109951166952713766.jpg?param=100y100"
	// })
</script>

<style lang="scss" scoped>
	
	.card{
		height: 180rpx;
		width:180rpx;
		display: inline-block;
		background-color: blanchedalmond;
		border-radius: 10px;
		background-repeat: no-repeat;
		background-position:center center;
		background-size: cover;
		margin-right: 25rpx;
		.title{
			// pa: 10rpx;
			padding-top: 10rpx;
			padding-left: 15rpx;
			font-size: 20rpx;
			color: white;
			white-space: 30rpx;
			letter-spacing: 5rpx;
		}
	}

	
</style>